<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>产品对比</title>
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <!--<script src="https://unpkg.com/vue"></script>-->
    <!--<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>-->
    <style>

    *{padding:0;margin:0;}
        body {
            -webkit-tap-highlight-color: rgba(255, 0, 0, 0);
            font-size: 0.14rem;
            padding: 0;
            margin: 0;
            font-family: \5FAE\8F6F\96C5\9ED1;
            background: #fff;
            color: #333;
            -webkit-font-smoothing: antialiased;
            overflow-x: hidden;
            opacity: 0;
        }

        html, body {
            width: 100%;
            height: 100%;
        }

        div, input, button, textarea, span, small, big, p, applet, object, iframe, h1, h2, h3, h4, h5, h6, a, em, font, img, q, dl, dt, dd, ol, ul, li, fieldset, form, label, caption, tbody, tfoot, thead, tr, th, td, section, article, header, footer, aside, nav {
            padding: 0;
            margin: 0;
            list-style: none
        }

        section, article, header, footer, aside, nav {
            padding: 0;
            margin: 0;
            display: block
        }

        input, select, button, textarea {
            outline: none;
            border: none;
            font-size: 12px;
            font-family: \5FAE\8F6F\96C5\9ED1
        }

        input[type="button"], input[type="submit"], input[type="reset"], button {
            -webkit-appearance: none;
            cursor: pointer
        }

        img {
            border: none
        }

        a {
            color: #333;
            text-decoration: none;
            -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
        }

        a:hover {
            text-decoration: none
        }

        .left {
            float: left;
        }

        .right {
            float: right;
        }

        .title {
          position: fixed;
          top:0;
          z-index: 999;
          /*border-bottom: 0.01rem solid #999;
		   background: #fff;*/
          text-align: center;
		  height:42px;
		  background: linear-gradient(to right, #F94659 , #F44E95);
          width: 100%;
		  
        }

        .titleImg {
         
          margin: 12px 18px;
          width: 18px;
          height: 18px;
		  
        }
		.titleImg1{
          display: inline-block;
          margin: 12px 22px;
          width: 10px;
          height: 18px;
		  
        }
        .titleImg  img {
          width: 100%;
          height: 100%;
        }
		.titleImg1  img {
          width: 100%;
          height: 100%;
        }

        .titleName {
          font-size: 18px;
          line-height: 42px;
		  /*height: 0.8rem;*/
          margin: 0 auto;
          color: #fff;
         
        }

        /* title-stop */

        .section {
            position: relative;
            /*padding-top: .8rem;*/
			padding-top: 42px;
            overflow-x: scroll;
            width:100%;
            height: 100%;
        }
        .valueName {
            color: red;
            line-height: 1.2rem !important;
            height: 1.2rem !important;
        }

        .valueName1 {
            vertical-align: middle;
            color: #333;
            background: #fff !important;
            line-height: 1.2rem !important;
            height: 1.2rem !important;
        }

        .sectionValue li {
            border-bottom: 0.01rem solid #ccc;
            border-right: 0.01rem solid #ccc;
            text-align: center;
            font-size: 0.2rem;
            background: #f1f1f1;
            line-height: 0.7rem;
            width: 2.2rem;
        }

        /* second */
        .second {
            position: relative;
        }

        .second img {
            position: absolute;
            top: 0;
            right: 0;
            width: 0.2rem;
            height: 0.2rem;
        }

        .spanheight {
            width: 2.2rem;
            padding: 0 0.1rem;
            line-height: 0.3rem;
            display: table-cell;
            vertical-align: middle;
            text-align: center;
        }

      .tableVlue{
        background: #f1f1f1;
		
      }
      .tableVlue  td{
        border-right:1px solid #f1f1f1;
        border-bottom:1px solid #ccc;
		
      }
	  .tableVlue  td p{
        text-align: center;
        /*padding:.2rem 0;*/
		padding:11px;
		
      }
	  .fontcolor{
		color:#4a4a4a;
		font-size:16px;
		
	  }
      .table-box-ul{
        display: flex;
        word-wrap: break-word;
        word-break: normal;
      }
      .table-box-ul li{
        width:2.2rem;
        min-height: .64rem;
        border-right:1px solid #ccc;
		font-size:14px;
		color:#4a4a4a;
		
		text-align: center;
      }
	  .table-box-ul li p{
		  display: inline-block;
		  text-align:left
	  }
		  
      .table-title p{
        text-align: center;
        width:2.2rem;
       /* color: red;*/
	   color:#eb5256;
	   font-size:16px;
	
      }
      
      .bgwhite{
        background: #fff;
      }
      .tr-first-td{
        position: relative;
        border-right:1px solid #ccc;
      }
      .img-detail{
        width:.2rem;
        height:.2rem;
        position: absolute;
        /*top:.02rem;
        right:.02rem;*/
		top:4px;
        right:4px;
      }
    </style>
    <script type="text/javascript">
          function gotoActivity (activity) {
            nativeMethod.toActivity(activity);
          }
</script>
</head>
<body>
<div id="app">
    <div class="title">
      <span class="titleImg1 left" onclick="gotoActivity('a')">
        <img  src="img/Page 1white.png" alt="">
      </span>
        <span class="titleName">产品对比</span>
        <!-- <a href="search.html"><span class="titleImg right">
        <img src="img/Search Icon@2x.png" alt="">
      </span></a> -->
    </div>
    <div class="section">
        <table class="tableVlue" border="0" cellspacing="0" cellpadding="0">
            <tr>
                <td class="table-title"><p>对比项</p></td>
                <td class="table-box">
                   <ul class="table-box-ul">
                        <li class="tr-first-td bgwhite"  v-for="(item,index) in dataList">
                            <img class="img-detail" src="./img/delete.png" alt="" @click="deleteImg(index)">
                            <p v-text="item.product[0].name"></p>
                        </li>
                    </ul>
                    <!--<ul class="table-box-ul">-->
                        <!--<li class="tr-first-td bgwhite" >-->
                            <!--<img class="img-detail" src="./img/delete.png" alt="" @click="deleteImg(index)">-->
                            <!--<p >中融-成安9号旅游地产行业龙头16三年季报总资产</p>-->
                        <!--</li>-->
                        <!---->
                        <!--<li class="tr-first-td bgwhite" >-->
                            <!--<img class="img-detail" src="./img/delete.png" alt="" @click="deleteImg(index)">-->
                            <!--<p >中融-成安9号旅游地产行业龙头16三年季报总资产</p>-->
                        <!--</li>-->
                        <!---->
                        <!--<li class="tr-first-td bgwhite" >-->
                            <!--<img class="img-detail" src="./img/delete.png" alt="" @click="deleteImg(index)">-->
                            <!--<p >中融-成安9号旅游地产行业龙头16三年季报总资产</p>-->
                        <!--</li>-->
                        <!---->
                    <!--</ul>-->
                    
                </td>
            </tr>
            <tr>
                <td><p class="fontcolor">募集状态</p></td>
                <td class="table-box">
                    <ul class="table-box-ul bgwhite">
                        <li class="yichuyincang" v-for="(item,index) in dataList"><p v-text="item.product[0].recruitmentStatus">-</p></li>
                    </ul>
                    <!--<ul class="table-box-ul bgwhite">-->
                        <!--<li class="yichuyincang" ><p >已募集-</p></li>-->
                        <!--<li class="yichuyincang" ><p >已募集-</p></li>-->
                        <!--<li class="yichuyincang" ><p >已募集-</p></li>-->
                    <!--</ul>-->
                </td>
            </tr>
            <tr>
                <td><p class="fontcolor">募集比例</p></td>
                <td class="table-box bgwhite">
                    <ul class="table-box-ul" >
                        <li class="yichuyincang" v-for="(item,index) in dataList"><p v-text="item.product[0].shelfState">-</p></li>
                    </ul>
                    <!--<ul class="table-box-ul" >-->
                        <!--<li class="yichuyincang" ><p >50-</p></li>-->
                        <!--<li class="yichuyincang" ><p >40-</p></li>-->
                        <!--<li class="yichuyincang" ><p >93-</p></li>-->
                        <!---->
                    <!--</ul>-->
                </td>
            </tr>
            <tr>
                <td><p class="fontcolor">打款日期</p></td>
                <td class="table-box bgwhite">
                   <ul class="table-box-ul">
                        <li class="yichuyincang"  v-for="(item,index) in dataList"><p v-text="item.product[0].depositDate">-</p></li>
                    </ul>
                    <!--<ul class="table-box-ul">-->
                        <!--<li class="yichuyincang"  ><p>2018-4-9</p></li>-->
                        <!--<li class="yichuyincang"  ><p>2018-4-9</p></li>-->
                        <!--<li class="yichuyincang"  ><p>2018-4-9</p></li>-->
                    <!--</ul>-->
                </td>
            </tr>
            <tr>
                <td><p class="fontcolor">截止打款</p></td>
                <td class="table-box bgwhite">
                   <ul class="table-box-ul" >
                        <li class="yichuyincang"  v-for="(item,index) in dataList"><p v-text="item.product[0].cutoffDate">-</p></li>
                    </ul>
                    <!--<ul class="table-box-ul">-->
                        <!--<li class="yichuyincang"  ><p>2018-8-9</p></li>-->
                        <!--<li class="yichuyincang"  ><p>2018-8-9</p></li>-->
                        <!--<li class="yichuyincang"  ><p>2018-8-9</p></li>-->
                    <!--</ul>-->
                </td>
            </tr>
            <tr>
                <td><p class="fontcolor">用途</p></td>
                <td class="table-box bgwhite">
                    <ul class="table-box-ul" >
                        <li class="yichuyincang"  v-for="(item,index) in dataList"><p v-text="item.product[0].fundUse"></p></li>
                    </ul>
                    
                    <!--<ul class="table-box-ul" >-->
                        <!--<li class="yichuyincang" ><p>将转速低</p></li>-->
                        <!--<li class="yichuyincang" ><p>将转速低</p></li>-->
                        <!--<li class="yichuyincang" ><p>将转速低</p></li>-->
                    <!--</ul>-->
                    
                </td>
            </tr>
            <tr>
                <td class="fontcolor"><p>产品名称</p></td>
                <td class="table-box bgwhite">
                   <ul class="table-box-ul" >
                        <li class="yichuyincang" v-for="(item,index) in dataList"><p v-text="item.product[0].name"></p></li>
                    </ul>
                    
                    <!--<ul class="table-box-ul" >-->
                        <!--<li class="yichuyincang"><p >中融信托</p></li>-->
                        <!--<li class="yichuyincang"><p >中融信托</p></li>-->
                        <!--<li class="yichuyincang"><p >中融信托</p></li>-->
                    <!--</ul>-->
                </td>
            </tr>
            <tr>
                <td class="fontcolor"><p>评价等级</p></td>
                <td class="table-box bgwhite">
                   <ul class="table-box-ul" >
                        <li class="yichuyincang" v-for="(item,index) in dataList"><p v-text="item.product[0].rating"></p></li>
                    </ul>
                    
                    <!--<ul class="table-box-ul" >-->
                        <!--<li class="yichuyincang"><p >一级</p></li>-->
                        <!--<li class="yichuyincang"><p >一级</p></li>-->
                        <!--<li class="yichuyincang"><p >一级</p></li>-->
                    <!--</ul>-->
                </td>
            </tr>
            <tr>
                <td><p class="fontcolor">说明</p></td>
                <td class="table-box bgwhite">
                   <ul class="table-box-ul" >
                        <li class="yichuyincang" v-for="(item,index) in dataList"><p v-text="item.product[0].explain"></p></li>
                    </ul>
                    <!--<ul class="table-box-ul" >-->
                        <!--<li class="yichuyincang"><p >动机加斯东方基金惊世毒妃金佛寺大姐家发动机加斯东方基金惊世毒妃金佛寺大姐夫还句舒服ID年检费低价几分is点家发动机加斯东方基金惊世毒妃金佛寺</p></li>-->
                        <!--<li class="yichuyincang"><p >动机加斯东方基金惊世毒妃金佛寺大姐家发动机加斯东方基金惊世毒妃金佛寺大姐夫还句舒服ID年检费低价几分is点家发动机加斯东方基金惊世毒妃金佛寺</p></li>-->
                        <!--<li class="yichuyincang"><p >动机加斯东方基金惊世毒妃金佛寺大姐家发动机加斯东方基金惊世毒妃金佛寺大姐夫还句舒服ID年检费低价几分is点家发动机加斯东方基金惊世毒妃金佛寺</p></li>-->
                    <!--</ul>-->
                </td>
            </tr>
            <tr>
                <td><p class="fontcolor">基金状态</p></td>
                <td class="table-box bgwhite">
                    <ul class="table-box-ul">
                        <li class="yichuyincang" v-for="(item,index) in dataList"><p v-text="item.product[0].status"></p></li>
                    </ul>
                    <!--<ul class="table-box-ul" >-->
                        <!--<li class="yichuyincang"><p >一级</p></li>-->
                        <!--<li class="yichuyincang"><p >一级</p></li>-->
                        <!--<li class="yichuyincang"><p >一级</p></li>-->
                    <!--</ul>-->
                </td>
            </tr>
            <tr>
                <td><p class="fontcolor">大小配比</p></td>
                <td class="table-box bgwhite">
                   <ul class="table-box-ul">
                        <li class="yichuyincang" v-for="(item,index) in dataList"><p v-text="item.product[0].sizeRatio"></p></li>
                    </ul>
                    <!--<ul class="table-box-ul" >-->
                        <!--<li class="yichuyincang"><p >一级</p></li>-->
                        <!--<li class="yichuyincang"><p >一级</p></li>-->
                        <!--<li class="yichuyincang"><p >一级</p></li>-->
                    <!--</ul>-->
                </td>
            </tr>
            <tr>
                <td><p class="fontcolor">收益类型</p></td>
                <td class="table-box bgwhite">
                    <ul class="table-box-ul">
                        <li class="yichuyincang"  v-for="(item,index) in dataList"><p v-text="item.product[0].type"></p></li>
                    </ul>
                    <!--<ul class="table-box-ul" >-->
                        <!--<li class="yichuyincang"><p >一级</p></li>-->
                        <!--<li class="yichuyincang"><p >一级</p></li>-->
                        <!--<li class="yichuyincang"><p >一级</p></li>-->
                    <!--</ul>-->
                </td>
            </tr>
            <tr>
                <td><p class="fontcolor">发行机构</p></td>
                <td class="table-box bgwhite">
                    <ul class="table-box-ul" >
                        <li class="yichuyincang" v-for="(item,index) in dataList"><p v-text="item.product[0].organization"></p></li>
                    </ul>
                    <!--<ul class="table-box-ul" >-->
                        <!--<li class="yichuyincang"><p >一级</p></li>-->
                        <!--<li class="yichuyincang"><p >一级</p></li>-->
                        <!--<li class="yichuyincang"><p >一级</p></li>-->
                    <!--</ul>-->
                </td>
            </tr>
            <tr>
                <td><p class="fontcolor">付息方式</p></td>
                <td class="table-box bgwhite">
                  <ul class="table-box-ul" >
                        <li class="yichuyincang" v-for="(item,index) in dataList"><p v-text="item.product[0].method"></p></li>
                    </ul>
                    <!--<ul class="table-box-ul" >-->
                        <!--<li class="yichuyincang"><p >一级</p></li>-->
                        <!--<li class="yichuyincang"><p >一级</p></li>-->
                        <!--<li class="yichuyincang"><p >一级</p></li>-->
                    <!--</ul>-->
                </td>
            </tr>
            <tr>
                <td><p class="fontcolor">投资领域</p></td>
                <td class="table-box bgwhite">
                   <ul class="table-box-ul" >
                        <li class="yichuyincang" v-for="(item,index) in dataList"><p v-text="item.product[0].field"></p></li>
                    </ul>
                    <!--<ul class="table-box-ul" >-->
                        <!--<li class="yichuyincang"><p >一级</p></li>-->
                        <!--<li class="yichuyincang"><p >一级</p></li>-->
                        <!--<li class="yichuyincang"><p >一级</p></li>-->
                    <!--</ul>-->
                </td>
            </tr>
            <tr>
                <td><p class="fontcolor">基金类型</p></td>
                <td class="table-box bgwhite">
                    <ul class="table-box-ul" >
                        <li class="yichuyincang" v-for="(item,index) in dataList">
                          <p v-text="item.product[0].fundType"></p>
                        </li>
                    </ul>
                    <!--<ul class="table-box-ul" >-->
                        <!--<li class="yichuyincang"><p >一级</p></li>-->
                        <!--<li class="yichuyincang"><p >一级</p></li>-->
                        <!--<li class="yichuyincang"><p >一级</p></li>-->
                    <!--</ul>-->
                </td>
            </tr>
            <tr>
                <td><p class="fontcolor">产品期限</p></td>
                <td class="table-box bgwhite">
                    <ul class="table-box-ul" >
                        <li class="yichuyincang" v-for="(item,index) in dataList"><p v-text="item.product[0].deadline"></p></li>
                    </ul>
                    <!--<ul class="table-box-ul" >-->
                        <!--<li class="yichuyincang"><p >一级</p></li>-->
                        <!--<li class="yichuyincang"><p >一级</p></li>-->
                        <!--<li class="yichuyincang"><p >一级</p></li>-->
                    <!--</ul>-->
                </td>
            </tr>
            <tr>
                <td><p class="fontcolor">认购起点</p></td>
                <td class="table-box bgwhite">
                   <ul class="table-box-ul" >
                        <li class="yichuyincang" v-for="(item,index) in dataList"><p  v-text="item.product[0].purchaseStart"></p></li>
                    </ul>
                    <!--<ul class="table-box-ul" >-->
                        <!--<li class="yichuyincang"><p >一级</p></li>-->
                        <!--<li class="yichuyincang"><p >一级</p></li>-->
                        <!--<li class="yichuyincang"><p >一级</p></li>-->
                    <!--</ul>-->
                </td>
            </tr>
            <tr>
                <td><p class="fontcolor">起售日</p></td>
                <td class="table-box bgwhite">
                   <ul class="table-box-ul" >
                        <li class="yichuyincang" v-for="(item,index) in dataList"><p v-text="item.product[0].scaleStart"></p></li>
                    </ul>
                    <!--<ul class="table-box-ul" >-->
                        <!--<li class="yichuyincang"><p >一级</p></li>-->
                        <!--<li class="yichuyincang"><p >一级</p></li>-->
                        <!--<li class="yichuyincang"><p >一级</p></li>-->
                    <!--</ul>-->
                </td>
            </tr>
            <tr>
                <td><p class="fontcolor">抵/质押</p></td>
                <td class="table-box bgwhite">
                    <ul class="table-box-ul" >
                        <li class="yichuyincang" v-for="(item,index) in dataList"><p v-text="item.product[0].mortgage"></p></li>
                    </ul>
                    <!--<ul class="table-box-ul" >-->
                        <!--<li class="yichuyincang"><p >一级</p></li>-->
                        <!--<li class="yichuyincang"><p >一级</p></li>-->
                        <!--<li class="yichuyincang"><p >一级</p></li>-->
                    <!--</ul>-->
                </td>
            </tr>
            <tr>
                <td><p class="fontcolor">是否机构化</p></td>
                <td class="table-box bgwhite">
                    <ul class="table-box-ul" >
                        <li class="yichuyincang" v-for="(item,index) in dataList"><p v-text="item.product[0].structured"></p></li>
                    </ul>
                    <!--<ul class="table-box-ul" >-->
                        <!--<li class="yichuyincang"><p >一级</p></li>-->
                        <!--<li class="yichuyincang"><p >一级</p></li>-->
                        <!--<li class="yichuyincang"><p >一级</p></li>-->
                    <!--</ul>-->
                </td>
            </tr>
            <tr>
                <td><p class="fontcolor">产品亮点</p></td>
                <td class="table-box bgwhite">
                   <ul class="table-box-ul" >
                        <li class="yichuyincang" v-for="(item,index) in dataList"><p v-text="item.product[0].light"></p></li>
                    </ul>
                    <!--<ul class="table-box-ul" >-->
                        <!--<li class="yichuyincang" >-->
                          <!--<p >家发动机加斯东方基金惊世毒妃金佛寺大姐家发动机加斯东方基金惊世毒妃金佛寺大姐夫还句舒服ID年检费低价几分is点家发动机加斯东方基金惊世毒妃金佛寺大姐夫还句舒服ID年检费低价几分is点夫还句舒服ID年检费低价几分is点击几分ID及</p>-->
                        <!--</li>-->
                        <!--<li class="yichuyincang" >-->
                          <!--<p >家发动机加斯东方基金惊世毒妃金佛寺大姐家发动机加斯东方基金惊世毒妃金佛寺大姐夫还句舒服ID年检费低价几分is点家发动机加斯东方基金惊世毒妃金佛寺大姐夫还句舒服ID年检费低价几分is点夫还句舒服ID年检费低价几分is点击几分ID及</p>-->
                        <!--</li>-->
                        <!--<li class="yichuyincang" >-->
                          <!--<p >家发动机加斯东方基金惊世毒妃金佛寺大姐家发动机加斯东方基金惊世毒妃金佛寺大姐夫还句舒服ID年检费低价几分is点家发动机加斯东方基金惊世毒妃金佛寺大姐夫还句舒服ID年检费低价几分is点夫还句舒服ID年检费低价几分is点击几分ID及</p>-->
                        <!--</li>-->
                    <!--</ul>-->
                </td>
            </tr>
            <tr>
                <td><p class="fontcolor">起投金额</p></td>
                <td class="table-box bgwhite">
                    <ul class="table-box-ul" >
                        <li class="yichuyincang" v-for="(item,index) in dataList"><p v-text="item.product[0].money"></p></li>
                    </ul>
                    <!--<ul class="table-box-ul" >-->
                        <!--<li class="yichuyincang" >-->
                          <!--<p >122</p>-->
                        <!--</li>-->
                        <!--<li class="yichuyincang" >-->
                          <!--<p >334</p>-->
                        <!--</li>-->
                        <!--<li class="yichuyincang" >-->
                          <!--<p >432</p>-->
                        <!--</li>-->
                    <!--</ul>-->
                </td>
            </tr>
            <tr>
                <td><p class="fontcolor">收益</p></td>
                <td class="table-box bgwhite">
                    <ul class="table-box-ul" >
                        <li class="yichuyincang" v-for="(item,index) in dataList"><p v-text="item.product[0].profit"></p></li>
                    </ul>
                    <!--<ul class="table-box-ul" >-->
                        <!--<li class="yichuyincang" >-->
                          <!--<p >2%</p>-->
                        <!--</li>-->
                        <!--<li class="yichuyincang" >-->
                          <!--<p >2%</p>-->
                        <!--</li>-->
                        <!--<li class="yichuyincang" >-->
                          <!--<p >2%</p>-->
                        <!--</li>-->
                    <!--</ul>-->
                </td>
            </tr>
            <tr>
                <td><p class="fontcolor">参考发行费</p></td>
                <td class="table-box bgwhite">
                   <ul class="table-box-ul" >
                        <li class="yichuyincang" v-for="(item,index) in dataList">
                          <p v-text="item.product[0].rebate"></p>
                        </li>
                    </ul>
                    
                    <!--<ul class="table-box-ul" >-->
                        <!--<li class="yichuyincang" >-->
                          <!--<p >2%</p>-->
                        <!--</li>-->
                        <!--<li class="yichuyincang" >-->
                          <!--<p >2%</p>-->
                        <!--</li>-->
                        <!--<li class="yichuyincang" >-->
                          <!--<p >2%</p>-->
                        <!--</li>-->
                    <!--</ul>-->
                </td>
            </tr>

        </table>


    </div>
</div>
</body>
<script src="./js/vue.js"></script>
<script type="text/javascript" src="./js/jQuery.js"></script>
<script>
    /**
     *
     *
     *
     *
     *
     *
     *
     *
     *
     *
     *
     *
     *
     *
     *
     *
     * @type {string}119.23.16.80:8080
     */
    var serverURL =  "http://vip2.sosochudan.com/app/jxb/"
    /**
     *
     *
     *
     *
     *
     *
     *
     *
     *
     *
     *
     *
     *
     *
     *
     *
     * @type {string}
     */
    $(function () {
        function reset() {
            window.onresize = r;
            function r(n) {
                var innerWidth = window.innerWidth;
                document.querySelector('html').style.fontSize = 0.15625 * innerWidth + "px";
                if (innerWidth > window.screen.width && n <= 10) {
                    setTimeout(function (n) {
                        r(++n);
                    }, 100)
                } else {
                    document.querySelector('body').style.opacity = 1;
                }
            }

            setTimeout(function () {
                r(0);
            }, 100)
        }

        reset();
    });
    var vm = new Vue({
        el: '#app',
        data: {
            num: '',
            dataList: '',
            userId:'',
        },
        methods: {
          backLast: function () {
                //window.history.go(-1);  //返回上一页
                //window.href.location='index.html'
            },
            more: function () {
              var array="";
              var data1 = {
                "userId":vm.userId
               };
                $.ajax({
                    url: serverURL + "getChooseProId",
                    type: "POST",
                    data: JSON.stringify(data1),
                    success: function (data) {
                        var obj = JSON.parse(data);
                        if(obj.data.result == "1"){
                          var proId = obj.data.proId;
                          sessionStorage.setItem("arrayProId",proId);
                          var data2 = {
                            "userId":vm.userId,
                            "proId":proId,
                           };
                           $.ajax({
                              url: serverURL + "compareProduct",
                              type: "POST",
                              data: JSON.stringify(data2),
                              success:function(data) {
                                var obj = JSON.parse(data);
                                if(obj.data.result == "1"){
                                  vm.dataList = obj.data.product;
                                  vm.jisuan();
                                  console.log(vm.dataList)
                                }
                              }
                            });
                        }
                    },
                    error: function (data) {
                    }
                });
            },
            jisuan: function () {
                var svWidth = (vm.dataList.length * 2) + 4 + "rem";
                var svHeight = $(document.body).height() - $('.title').height() + 100 + "px";
                $('.sectionValue').css({
                    "width": svWidth,
                });
                $('.section').css({
                    "height": svHeight,
                });
            },
            deleteImg: function (index) {
                vm.dataList.splice(index,1);
                /*var data = {
                    "proId": item.id,
                    "userId": vm.userId
                };
                $.ajax({
                    url: serverURL + "deleteCompare",
                    data: JSON.stringify(data),
                    type: "POST",
                    success: function (data) {
                        vm.dataList.splice(index, 1);
                        vm.num.splice(index, 1);
                        //vm.more();
                    }
                });*/
            },
            showInfo:function(msg){
                alert(msg)
            }
        },
    });
    function GetQueryString(name)
    {
        var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
        var r = window.location.search.substr(1).match(reg);
        if(r!=null)return  unescape(r[2]); return null;
    }
    //vue初始化自动执行函数
    vm.$nextTick(function () {
        vm.userId = GetQueryString("userId");
        //vm.userId = "bb71e53247ab4a6097044f3039d5736e";
        if(!vm.userId){
            vm.userId = sessionStorage.getItem("userId");
        }else{
            sessionStorage.setItem("userId",vm.userId);
        }
        vm.more();
    })
</script>
</html>
